<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<style type="text/css">
			.box {
				top: 98px;
				width: 450px;
				height: 650px;
				margin-top: 3%;
				margin-left: 65%;
				margin-bottom: 3%;
				margin-right: 0;
				font-size: 14px;
				background-color: #FFFFFF;
				opacity: 0.7;
				border: solid 1px #FFFFFF;
				position: relative;
			}

			.di {
				background: #fff;
				margin-top: 0;
				margin-bottom: 2%;
				padding-top: 100px;
				position: absolute;
				width: 100%
			}

			.title {
				position: relative;
				padding-top: 27px;
				padding-right: 0px;
				padding-bottom: 24px;
				padding-left: 0px;
				text-align: center;
				font-size: 24px;
				color: #666;
			}

			.u-input {
				position: relative;
				width: 410px;
				height: 170px;
				font-size: 30px;
			}

			.u-input-btn {
				background-color: #ff6700;
				width: 380px;
				height: 50px;
				line-height: 20px;
				display: block;
				margin-bottom: 14px;
				text-align: center;
				font-size: 18px;
				color: #fff;
				/* 鼠标指针变手 */
				cursor: pointer;
				margin-left: 7%;
				margin-top: 8%;
				border-color: #FF6700;
				position: relative;
			}

			.u-input input {
				position: relative;
				margin-left: 7%;
				width: 350px;
				line-height: 22px;
				padding-top: 15px;
				padding-right: 16px;
				padding-bottom: 15px;
				padding-left: 16px;
				display: block;
				font-size: 15px;
			}

			.language {
				text-align: center;
				display: inline-block;
				display: block;
				margin-left: 4%;
			}

			.language a {
				color: #757575;
				padding-top: 0px;
				padding-right: 10px;
				padding-bottom: 10px;
				padding-left: 10px;
			}
			body{
				margin: 0;
				background-image: url(img/denglubg.jpg);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			.head{
				width: 1130px;
				margin: 0 auto;
			}
			
			.head-logo a{
				display: block;
				margin-left: 10%;
				position: relative;
			}
			
			.foot{
				padding-top: 10px;
				padding-right: 10px;
				padding-bottom: 10px;
				padding-left: 10px;
			}
			
			.foot a{
				color: #757575;
				text-align: center;
				display: inline-block;
				display: block;
				margin-left: 4%;
			}
		</style>

		<script type="text/javascript">
			/* 登录跳转判断 */
			function checkLogin(){
				var name=document.getElementById("username").value;
				var pass=document.getElementById("password").value;
				var error=document.getElementById("errors");
				error.innerText="";
				
				/* 判断用户名是否为空 */
				if(name==null||name==""){
					error.innerText="用户名不能为空";
				}
				/* 判断密码是否为空 */
				else if(pass==null||pass==""){
					error.innerText="密码不能为空";
				}
				/* 非空跳转 */
				else{
					error.innerText="";
					window.location.href="index.html";
				}
			}
			
			/* 注册跳转 */
			function zhuce(){
				window.location.href="zhuce.html";
			}
		</script>
	</head>
	<body>
		<!-- 导航 -->
		<div class="heade">
			<div class="head-logo">
				<a href="index.html"><img src="img/head-logo.png" /></a>
			</div>
		</div>
		
		<!-- 登录 -->
		<div class="box" >
			<div class="title">
				账号登录
			</div>
			
			<!-- 输入框 -->
			<div class="u-input">
				<!-- 账号 -->
				<p>
					<input type="text" id="username" placeholder="邮箱/手机号码/小米ID">
				</p>
				
				<!-- 密码 -->
				<p>
					<input type="password" id="password" placeholder="密码">
					<!-- 错误提示信息 -->
					<span id="errors" style="color: #FF6700;font-size: 14px;margin-left: 7%;" ></span>
				</p>
				
			</div>
			
			<!-- 登录按钮 -->
			<p>
				<input type="submit" name="Submit" value="登录" onclick="checkLogin()" class="u-input-btn"/>
			</p>
			<!-- 注册按钮 -->
			<p>
				<input type="submit" name="Submit" value="注册" onclick="zhuce()" class="u-input-btn"/>
			</p>
		</div>
		
		<!-- 底部信息 -->
		<div class="di">
			<div class="language">
				<a>简体</a>
				<a>|</a>
				<a>繁体</a>
				<a>|</a>
				<a>English</a>
				<a>|</a>
				<a>常见问题</a>
				<a>|</a>
				<a>隐私政策</a>
				<br />
				<br />
			</div>
			<div class="foot">
				<a>小米公司版权所有-京ICP备10046444-<img src="img/jinghui.png">京公网安备11010802020134号-京ICP证110507号</a>
			</div>
		</div>
	</body>
</html>